<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网登录</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon"/>
<link href="css/login.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
<style>

</style>
</head>

<body>
<header>
	<a href="index.html" target="_blank"><img src="images/logo.png" alt="logo" title="点击进入零食网" /></a>
</header>

<article id="app">
	<div class="loginarea">
    	<div class="item">
        	<h1>源辰会员 <a href="register.html">立即注册</a></h1>
        </div>
        
        <div class="item item-border">
        	<label for="account" class="login_label"></label>
            <input type="text" class="ipt" name="account" id="account" placeholder="邮箱/用户名/已验证的手机" v-model="nickName"/>
            <span class="clear_btn"></span>
        </div>
        
        <div class="item item-border">
        	<label for="pwd" class="login_label pwd_label"></label>
            <input type="password" maxlength="18" class="ipt" name="pwd" id="pwd" placeholder="密码" v-model="pwd"/>
            <span class="clear_btn"></span>
        </div>
        
         <div class="item item-border">
        	<label for="code" class="login_label pwd_label"></label>
            <input type="text" maxlength="4" class="ipt1" name="code" id="code" placeholder="验证码" v-model="code"/>
            <img class="code" src="code" onclick="this.src='code?d=' + new Date()">
        </div>
        
        <div class="item item2">
        	<input type="checkbox" id="auto">
        	<label for="auto">自动登录</label>
          	<a href="#">忘记密码</a>
        </div>
        
        <div class="item">
          	<a href="javascript:void(0)" class="btn_img" onclick="login()">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</a>
        </div>
        
        <div class="item item3">
          	<ul>
            	<li><a href="#"><span></span>QQ</a></li>
                <li><span></span></li>
                <li><a href="#"><span></span>微信</a></li>
                <li><span style="color:red">{{info}}</span></li>
            </ul>
        </div>
    </div>
</article>
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/axios.js"></script>
<script type="text/javascript" src="js/vue/qs.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	//当前页码数据 和每页显示数
	let page = 1;
	let rows = 2;


	let vm = new Vue({
		el: "#app",
		data : {
			nickName: 'navy',
			pwd: '123321',
			code: '',
			info: '',
		},
		methods: {// 此时Vue实例初始化完成 DOM挂载完成 可以直接操作DOM 调用定义的函数
			login(){
				// 发送登录请求
				// axios.({url})
				axios.post("mem/login", qs.stringify({nickName: this.nickName, pwd: this.pwd, realName: this.code})).then(res=>{
					console.log(res);
					if (!res.status == 200){
						this.info = '请求异常，检查网络';
						return;
					}
					if (res.data == 200){  // 自定义的响应码 代表登录成功
						// 获取来源地址 就是从哪个页面链接过来 登录成功返回跳转前的界面
						let temp = document.referrer;   // 
						console.log(temp);
						if (temp == "" || temp.indexOf("register.html") > 0){
							location.href = 'front/index.html';
							return;
						} 
						location.href = temp;
					}
					if (res.data == 501){
						this.info = '账号或密码错误，请确认后登录';
						return;
					}
					if (res.data == 504){
						this.info = '验证码错误，请切换新的验证码';
						return;
					}
				})
			}
		}
	})

</script>

<script type="text/javascript">
	// 模拟登录
	function login(){
		// 获取用户名
		var nickname = $("#account").val();
		// 获取密码
		var pwd = $("#pwd").val();
		// 获取验证码
		var yzm = $("#code").val();
		console.log(nickname);
		$.post("login", {name:nickname, pwd:pwd, tel:yzm}, rt => {
			console.log(rt);
		}, "text");
	}
</script>
</body>
</html>
